<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
  <title>金额语音播放</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 800px;
      margin: 20px auto;
      padding: 20px;
    }

    .container {
      text-align: center;
    }

    .input-group {
      margin: 20px 0;
    }

    input {
      padding: 10px;
      font-size: 16px;
      width: 200px;
    }

    button {
      padding: 10px 20px;
      font-size: 16px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    button:hover {
      background-color: #45a049;
    }

    #result {
      margin-top: 20px;
      font-size: 18px;
    }
  </style>
  <!--preload-links-->
  <!--app-context-->
</head>

<body>
  <div id="app"><!--app-html--></div>
  <div class="container">
    <h1>金额语音播放</h1>
    <div class="input-group">
      <input type="number" id="moneyInput" step="0.01" placeholder="请输入金额">
      <button onclick="playMoney()">播放语音</button>
    </div>
    <div id="result"></div>
    <audio id="audioPlayer"></audio>
  </div>
  <script type="module" src="/src/main.ts"></script>
  <script>
    function getAudioPath(char) {
      const basePath = '/Users/daijunxiong/Desktop/ihk/';
      // 如果是数字，直接返回对应的音频文件
      if (!isNaN(char)) {
        return basePath + 'tts_' + char + '.mp3';
      }
      // 否则查找映射表
      switch (char) {
        case '拾': return basePath + 'tts_ten.mp3';
        case '佰': return basePath + 'tts_hundred.mp3';
        case '仟': return basePath + 'tts_thousand.mp3';
        case '万': return basePath + 'tts_ten_thousand.mp3';
        case '元': return basePath + 'tts_yuan.mp3';
        default: return null;
      }
    }

    function processSection(section) {
      const audioQueue = [];
      for (let i = 0; i < section.length; i++) {
        const num = section[i];
        const unit = section.length - 1 - i;

        if (num !== '0') {
          audioQueue.push(getAudioPath(num));
          if (unit > 0) {
            const unitChar = unit === 3 ? '仟' : unit === 2 ? '佰' : '拾';
            audioQueue.push(getAudioPath(unitChar));
          }
        }
      }
      return audioQueue;
    }

    function playMoney() {
      const moneyInput = document.getElementById('moneyInput');
      const result = document.getElementById('result');
      const audioPlayer = document.getElementById('audioPlayer');

      const money = parseFloat(moneyInput.value);
      if (isNaN(money)) {
        result.textContent = '请输入有效的金额';
        return;
      }

      // 构建完整的播放队列
      const audioQueue = ['/Users/daijunxiong/Desktop/ihk/tts_money.mp3', '/Users/daijunxiong/Desktop/ihk/tts_wechat.m4a'];

      // 处理整数部分
      const yuan = Math.floor(money);
      if (yuan > 0) {
        const yuanStr = yuan.toString();
        // 将数字按4位分组，从右到左
        const sections = [];
        for (let i = yuanStr.length; i > 0; i -= 4) {
          sections.unshift(yuanStr.slice(Math.max(0, i - 4), i));
        }

        // 处理每个分组
        sections.forEach((section, index) => {
          const sectionAudio = processSection(section);
          audioQueue.push(...sectionAudio);
          // 如果不是最后一个分组且有值，添加"万"
          if (index < sections.length - 1) {
            audioQueue.push(getAudioPath('万'));
          }
        });

        // 添加"元"
        audioQueue.push(getAudioPath('元'));
      }

      // 最后添加成功提示音

      let currentIndex = 0;

      function playNext() {
        if (currentIndex < audioQueue.length) {
          audioPlayer.src = audioQueue[currentIndex];
          audioPlayer.play();
          currentIndex++;
        } else {
          audioPlayer.onended = null; // 播放完成后移除事件监听器
        }
      }

      // 移除之前的事件监听器（如果有的话）
      audioPlayer.onended = null;
      // 添加新的事件监听器
      audioPlayer.onended = playNext;

      // 开始播放
      playNext();
    }
  </script>
</body>

</html>